<template>
	<view class="addProduct">
		<nav-bar title="商品管理"></nav-bar>
		<view class="search-box">
			<!-- searchUrl="/subPages/searchPage/indexSearch"  @clear="clear" -->
			<you-search pageTitle="搜索" placeholder="搜索商品名称" @search="searchStore"></you-search>
			<view class="picker">
				<view v-for="(item,index) in PickerList" :class="item.label?'':'select'" :key="index"
					@click="openShow(item)">
					<text>{{item.label||item.acquiesce}}</text>
				</view>
			</view>
			<u-picker :show="PickerList[0].show" :columns="columns[0]" keyName="deptName" @confirm="confirm1"
				@cancel='PickerList[0].show = false'></u-picker>
			<u-picker :show="PickerList[1].show" :columns="columns[1]" keyName="deptName" @confirm="confirm2"
				@cancel='PickerList[1].show = false'></u-picker>
			<u-picker :show="PickerList[2].show" :columns="columns[2]" keyName="deptName" @confirm="confirm3"
				@cancel='PickerList[2].show = false'></u-picker>
		</view>
		<view class="common-no-data" v-if="!productList || productList.length === 0">
			<image class="no-data-img" :src="baseIconUrl + 'commonIcon/icon_no_data.png'" />
			<view class="text">暂无商品~</view>
		</view>
		<scroll-view scroll-y class="product-list" :style="{'height': `calc(${scrollHeight} - 300rpx)`}" v-else>
			<view class="product-list-item" v-for="item, index in productList" :key="item.id">
				<view class="top">
					<view class="img">
						<image :src="baseUrl + item.goodImg" mode="aspectFill"></image>
					</view>
					<view class="describe">
						<text>{{item.goodName}}</text>
						<view class="cargo">
							<text>月售：{{item.monthSellCount?item.monthSellCount:0}}</text><text>库存：{{item.counts?item.counts:0}}</text>
						</view>
						<view class="price">
							<text>零售价<text><text>￥</text>{{item.retailPrice?item.retailPrice:0}}</text></text>
							<text>批发价<text><text>￥</text>{{item.tradePrice?item.tradePrice:0}}</text></text>
						</view>
					</view>
				</view>
				<view class="status">
					<text style="color: #ec3434;"
						v-if="!item.goodStatus===2">{{item.goodStatus===1?'审核中':item.goodStatus===3?"审核不通过":''}}</text>
					<text :style="{color:item.isInitiate===0?'#0b3f35' : '#ec3434'}"
						v-else>{{item.isInitiate===0?'上架中':item.isInitiate===1?'未上架':''}}</text>
					<text v-if="item.source===2" @click="clickEdit(item)">编辑信息</text>
				</view>
				<view class="tabs" :style="{background: item.source===1?'#eb6418':item.source===2?'#0b3f35':'#0b3f35'}">
					{{item.source===1?'采购':item.source===2?'自营':''}}
				</view>
			</view>
		</scroll-view>
		<view class="product-add" @click="addPath">
			<image src="/static/images/productAdd.png" mode="aspectFill"></image>
			<text>新增商品</text>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl,
		baseIconUrl,
		baseImgUrl
	} from '@/config'
	export default {
		data() {
			return {
				scrollHeight: '',
				baseUrl,
				baseIconUrl,
				baseImgUrl,
				exclude: [],
				PickerList: [{
						label: '全部',
						id: null,
						acquiesce: '全部',
						show: false
					},
					{
						label: null,
						id: null,
						acquiesce: '二级分类',
						show: false
					},
					{
						label: null,
						id: null,
						acquiesce: '三级分类',
						show: false
					},
				],
				columns: [
					[
						[{
							deptName: "全部",
							id: 1,
						}]
					],
					[
						[]
					],
					[
						[]
					]
				],
				productList: [

				],
				roleType: 0,
			}
		},
		methods: {
			clickEdit(item) {
				uni.navigateTo({
					url: `addProduct?status=${true}&id=${item.id}`
				});
			},
			async searchStore(e) {
				if (this.roleType === 4) {
					const listres = await this.$GET(`/fx/store/good/list?pageNum=1&pageSize=100&goodName=${e}`)
					this.productList = listres.rows
				} else if (this.roleType === 3) {
					const listres = await this.$GET(`/fx/supplier/good/list?pageNum=1&pageSize=100&supplierName=${e}`)
					this.productList = listres.rows
				}
			},
			addPath() {
				uni.navigateTo({
					url: 'addProduct'
				});
			},
			openShow(item) {
				this.PickerList.forEach((t) => {
					t.show = false
				})
				if (this.columns[0][0].length > 0 && item.acquiesce === this.PickerList[0].acquiesce) {
					this.PickerList[0].show = true
				}
				if (this.columns[1][0].length > 0 && item.acquiesce === this.PickerList[1].acquiesce) {
					this.PickerList[1].show = true
				}
				if (this.columns[2][0].length > 0 && item.acquiesce === this.PickerList[2].acquiesce) {
					this.PickerList[2].show = true
				}
				if (this.columns[2][0].length <= 0 && item.acquiesce === this.PickerList[2].acquiesce ||
					this.columns[1][0].length <= 0 && item.acquiesce === this.PickerList[1].acquiesce) {
					uni.showToast({
						icon: 'none',
						title: '目前没有更多分类了'
					})
				}
			},
			confirm1(e) {
				this.PickerList[0].label = e.value[0].deptName
				this.PickerList[0].id = e.value[0].id
				this.PickerList.forEach((t) => {
					t.show = false
				})
				let id = e.value[0].id !== 1 ? e.value[0].id : ''
				this.sortList(id, 1)
				this.columns[1][0] = []
				this.PickerList[1].label = null
				this.columns[2][0] = []
				this.PickerList[2].label = null
			},
			confirm2(e) {
				if (this.PickerList[0].id) {
					this.PickerList[1].label = e.value[0].deptName
					this.PickerList[1].id = e.value[0].id
				}
				this.PickerList.forEach((t) => {
					t.show = false
				})
				this.sortList(e.value[0].id, 2)
				this.columns[2][0] = []
				this.PickerList[2].label = null
			},
			confirm3(e) {
				if (this.PickerList[1].id) {
					this.PickerList[2].label = e.value[0].deptName
					this.PickerList[2].id = e.value[0].id
				}
				this.PickerList.forEach((t) => {
					t.show = false
				})
				this.sortList(e.value[0].id, 3)
			},
			async sortList(id, num) {
				if (num === 1) {
					if (this.roleType === 4) {
						const listres = await this.$GET(
							`/fx/store/good/list?pageNum=1&pageSize=100&classOneId=${id}`)
						this.productList = listres.rows
					} else if (this.roleType === 3) {
						const listres = await this.$GET(
							`/fx/supplier/good/list?pageNum=1&pageSize=100&classOneId=${id}`)
						this.productList = listres.rows
					}
				} else if (num === 2) {
					if (this.roleType === 4) {
						const listres = await this.$GET(
							`/fx/store/good/list?pageNum=1&pageSize=100&classTwoId=${id}`)
						this.productList = listres.rows
					} else if (this.roleType === 3) {
						const listres = await this.$GET(
							`/fx/supplier/good/list?pageNum=1&pageSize=100&classTwoId=${id}`)
						this.productList = listres.rows
					}
				} else if (num === 3) {
					if (this.roleType === 4) {
						const listres = await this.$GET(
							`/fx/store/good/list?pageNum=1&pageSize=100&classThreeId=${id}`)
						this.productList = listres.rows
					} else if (this.roleType === 3) {
						const listres = await this.$GET(
							`/fx/supplier/good/list?pageNum=1&pageSize=100&classThreeId=${id}`)
						this.productList = listres.rows
					}
				}
			},
			// 上拉加载
			loadMore() {
				if (this.orderList.length < this.total) {
					this.pageNum++
					this.isAllData = false
					this.isRequestSuccess = false
					this.getOrderList()
				} else {
					this.isAllData = true
				}
			},
		},
		watch: {
			PickerList: {
				handler: function(val, oldVal) {
					console.log(val);
					this.exclude.forEach((t, i) => {
						if (t.ancestors === `0,${val[0].id}`) {
							this.columns[1][0].push(t)
						}
						if (t.ancestors === `0,${val[0].id},${val[1].id}`) {
							this.columns[2][0].push(t)
						}
					})
					console.log(this.columns[1]);
					console.log(this.columns[2]);
				},
				deep: true
			},
		},
		async onLoad() {
			this.scrollHeight = this.$store.getters.heightData.noTabMainHeight + 'px'
			const ress = await this.$GET('/fx/user/getInfo')
			this.roleType = ress.data.roleType
			const id = 1
			const res = await this.$GET(`/fx/goodclassify/list/exclude/${id}`)
			this.exclude = res.data
			this.exclude.forEach((t, i) => {
				if (t.ancestors === '0') {
					this.columns[0][0].push(t)
				}
			})
			if (this.roleType === 4) {
				const listres = await this.$GET(`/fx/store/good/list?pageNum=1&pageSize=100`)
				this.productList = listres.rows
			} else if (this.roleType === 3) {
				const listres = await this.$GET(`/fx/supplier/good/list?pageNum=1&pageSize=10`)
				this.productList = listres.rows
			}
		},
		async onShow() {
			const ress = await this.$GET('/fx/user/getInfo')
			this.roleType = ress.data.roleType
			const id = 1
			const res = await this.$GET(`/fx/goodclassify/list/exclude/${id}`)
			this.exclude = res.data
			this.exclude.forEach((t, i) => {
				if (t.ancestors === '0') {
					this.columns[0][0].push(t)
				}
			})
			if (this.roleType === 4) {
				const listres = await this.$GET(`/fx/store/good/list?pageNum=1&pageSize=100`)
				this.productList = listres.rows
			} else if (this.roleType === 3) {
				const listres = await this.$GET(`/fx/supplier/good/list?pageNum=1&pageSize=10`)
				this.productList = listres.rows
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addProduct {
		.search-box {
			background: #ffffff;
			padding-top: 20upx;

			.picker {
				display: flex;
				justify-content: space-between;
				margin: 0 34upx 6upx;

				>view {
					width: 30%;
					padding: 14upx 20upx;
					background: #f5f5f5;
					border-radius: 200upx;
					font-size: 24upx;
					text-align: center;
					box-sizing: border-box;
				}

				.select {
					color: #c7c7c7;
				}
			}
		}

		.product-list {
			height: calc(100vh - 300upx);

			.product-list-item {
				position: relative;
				padding: 20upx;
				box-sizing: border-box;
				border-radius: 10upx;
				background: #ffffff;
				margin: 20upx;

				.top {
					display: flex;

					.img {
						width: 160upx;
						height: 160upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.describe {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 10upx;
						width: calc(100% - 170upx);
						padding: 10upx 0;

						>text {
							font-size: 28upx;
							display: -webkit-box;
							width: 100%;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2; //设置行数
							overflow: hidden;
						}

						view {
							font-size: 24upx;
							color: #aaaaaa;

							>text {
								display: inline-block;
								width: 50%;

								text {
									color: #eb3232;
									font-size: 28upx;
									margin-left: 8upx;

									text {
										font-size: 20upx;
										margin-left: 4upx;
									}
								}
							}
						}
					}
				}

				.status {
					display: flex;
					justify-content: space-between;
					color: #0b3f35;
					margin-top: 10upx;
				}

				.tabs {
					position: absolute;
					left: 0;
					top: 0;
					color: #ffffff;
					padding: 4rpx 12rpx;
					font-size: 26rpx;
					border-bottom-right-radius: 10upx;
					border-top-left-radius: 10upx;
				}
			}
		}

		.product-add {
			position: fixed;
			bottom: 60upx;
			right: 60upx;
			padding: 10upx;
			border-radius: 10upx;
			background: #0b3f35;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 48upx;
				height: 48upx;
			}

			text {
				color: #fff;
				font-size: 20upx;
			}
		}
	}
</style>